<template>
  <ConfigProvider :locale="getAntdLocale">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
  import { watch } from 'vue';
  import { ConfigProvider } from 'ant-design-vue';
  import { AppProvider } from '/@/components/Application';
  import { useTitle } from '/@/hooks/web/useTitle';
  import { useLocale } from '/@/locales/useLocale';
  import { useUserStore } from '/@/store/modules/user';
  import { SERVER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  import { useWatermark } from '/@/hooks/web/useWatermark';
  import { dateUtil as dayjs } from '/@/utils/dateUtil';

  import 'dayjs/locale/zh-cn';
  // support Multi-language
  const { getAntdLocale } = useLocale();

  // Listening to page changes and dynamically changing site titles
  useTitle();

  const serverInfo = getAuthCache<Recordable>(SERVER_INFO_KEY) || {};

  const userStore = useUserStore();

  userStore.serverInfo = serverInfo;
  // window.addEventListener('beforeunload', () => {
  //   window.localStorage.setItem('serverInfo', JSON.stringify(serverInfo));
  // });

  const { setWatermark } = useWatermark();

  watch(
    () => userStore.getUserInfo,
    async () => {
      if (userStore.serverInfo.isWatermark) {
        const userinfo = userStore.getUserInfo;
        console.log('userinfo', userinfo);
        if (userinfo?.realName) {
          // 水印
          const waterMark = `${userinfo.realName} ${dayjs().format('YYYY-MM-DD')}`;
          setWatermark(waterMark);
        }
      }
    },
    {
      immediate: true,
      deep: true,
    },
  );
</script>
